<template>
  <div>
    <h2>这里是系统的用户模块</h2>
    <h2>用户数据: {{ userInfo }}</h2>

    <button @click="handleClick">修改 Vuex 的值</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapGetters } from "vuex";

export default {
  name: "SystemUser",
  computed: {
    ...mapGetters(['userInfoStr']),
    ...mapState(["userInfo"]),
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    ...mapMutations({
      setUser: 'setUserInfo'
    }),
    ...mapMutations('aModule', {
      setUserInModuleA: 'setUser'
    }),

    // ...mapMutations({
    //   setUserInModuleA: 'setUser'
    // }),
    handleClick() {
      // this.$store.state.userInfo = {
      //   name: 'guest',
      //   age: 1000
      // }

      // * 手动提交一个 mutation 操作 
      // this.$store.commit('setUserInfo', {
      //   name: 'guest',
      //   age: 100
      // })

      // this.setUser({
      //   name: 'xiaoming',
      //   age: 10
      // })

      // this.$store.dispatch('setUserInfoAction', {
      //   name: 'xiaohong'
      // })

      this.setUserInModuleA({
        name: 'xiaoliang'
      })
    }
  }
};
</script>

<style></style>
